<template>
  <CommonCard title="累计用户数" :value="reportData.totalUser">
    <template #default>
      <v-chart :option="option"></v-chart>
    </template>
    <template #footer>
      <div class="wrapper">
        <div>
          <span>日同比</span>
          <span class="css-1">{{ reportData.userGrowLastDay }}%</span>
          <span
            :class="{
              increase: reportData.userGrowLastDay > 0,
              decrease: reportData.userGrowLastDay < 0,
            }"
          ></span>
        </div>
        <div>
          <span>月同比</span>
          <span class="css-1">{{ reportData.userGrowLastMonth }}%</span>
          <span
            :class="{
              increase: reportData.userGrowLastMonth > 0,
              decrease: reportData.userGrowLastMonth < 0,
            }"
          ></span>
        </div>
      </div>
    </template>
  </CommonCard>
</template>

<script setup>
import { ref, watch } from 'vue'
import CommonCard from './CommonCard.vue'
//接收数据
const props = defineProps({
  reportData: {
    type: Object,
  },
})
const option = ref({})
const renderChart = (v1, v2) => {
  option.value = {
    xAxis: {
      // 让x轴显示数据
      type: 'value',
      show: false,
    },
    yAxis: {
      // 让y轴设置为类目轴
      type: 'category',
      show: false,
    },
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    },
    series: [
      {
        type: 'bar',
        data: [v1],
        itemStyle: {
          color: 'green',
        },
        barWidth: 10,
        // 设置统一的stack, 将多个柱子堆叠在一起
        stack: 'total', //设置堆叠,让x轴和y轴的名字一样,就会堆叠在一起
      },
      {
        type: 'bar',
        data: [v2],
        itemStyle: {
          color: '#ddd',
        },
        barWidth: 10,
        stack: 'total',
      },
      {
        // 自定义形状
        type: 'custom',
        data: [v1],
        renderItem: (params, api) => {
          // 设置三角形的点的坐标(x,y)
          const [x, y] = api.coord([api.value(0), 0]) //api.value(0)中的0指的是x轴,如果是1为y轴,第二个0代表x轴data中的第1个数据
          // 返回值, 用于创建自定义形状, y轴向下为正方向, x轴向右为正方向
          return {
            type: 'group', // 组(包含两个三角形)
            children: [
              {
                type: 'path',
                shape: {
                  d: 'M 10 10 L 30 10 L 20 30 z', //M是点,L是线,Z是封闭,中间的是坐标
                  x: x - 5,
                  y: 5,
                  width: 10,
                  height: 10,
                  layout: 'cover',
                },
                style: {
                  fill: 'green',
                },
              },
              {
                type: 'path',
                shape: {
                  d: 'M 10 10 L 30 10 L 20 -10 z',
                  x: x - 5,
                  y: 35,
                  width: 10,
                  height: 10,
                  layout: 'cover',
                },
                style: {
                  fill: 'green',
                },
              },
            ],
          }
        },
      },
    ],
  }
}
watch(props, () => {
  renderChart(props.reportData.userLastMonth, props.reportData.userToday)
},{ immediate: true })
</script>

<style scoped>
.wrapper {
  display: flex;
  gap: 10px;
}
</style>
